<template>
	<view 
	:class="themeType === 'dark' ? 'gross-dark' : ''"
	style="min-height: 100%"
	>
		<view class="login-head" @click="backTo">
			<view class="iconfont icon-zuojiantou"></view>
		</view>
		<view class="login-content">
			 <view class="content-title">登录一晨看报</view>
			 <view class="content-method">选择登录方式</view>
			 <view class="content-choosen">
			 	<view class="content-weixin" @tap="btnLoading">
			 		<view class="iconfont icon-weixin"></view>
			 	</view>
				<view class="content-qq" @tap="btnLoading">
					<view class="iconfont icon-QQ"></view>
				</view>
			 </view>
			 <view class="content-you">
			 	<view class="content-radio"></view>
				<view class="content-txt">我同意
				<a class="one">《一晨协议》</a>和
				<a class="one">《个人信息保护指引》</a></view>
			 </view>
		</view>
		<view class="login-foot">
			<view class="login-shili" @tap="bgChange">
				<view class="iconfont icon-yueliang"></view>
				<view class="text">夜间模式</view>
			</view>
			<view class="login-shezi">
				<view class="iconfont icon-shezhi"></view>
				<view class="text">设置</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDark : 'dark',
				setCurThemeType
			}
		},
		methods: {
			backTo(){
				uni.navigateBack();
			},
			btnLoading(){
				uni.showToast({
				    title: '登录失败',
					icon : 'none'
				});
				setTimeout(function () {
				    uni.hideToast();
				}, 2000);
			},
			bgChange(){
				const isDark = this.isDark;
				const theme = isDark ? 'dark' : 'light';
				console.log(theme);
				this.setCurThemeType(theme);
				uni.setStorageSync('theme', theme);
				this.$store.dispatch('handleActionTheme', theme);
				getApp().handleSetTabBar();
				if (isDark) {
				uni.setTabBarStyle({
				    color: '#9299A7',
				    selectedColor: '#3C79FF',
				    backgroundColor: '#2B3757'
				});
				} else {
				uni.setTabBarStyle({
				    color: '#9299A7',
				    selectedColor: '#3C79FF',
				    backgroundColor: '#fff'
				    });
				}
			}
		}
	}
</script>

<style>
	/* 引入iconfontcss */
	@import '../../common/iconfont.css';
.one{
	color: #0066CF;
}
.login-head{
	width: 100%;
	height: 60px;
	line-height: 60px;
	padding-left: 10px;
}
.login-head .iconfont{
	font-size: 26px;
}

.login-content{
	width: 100%;
	height: 300px;
	text-align: center;
}
.login-content .content-title{
	font-size: 25px;
	font-weight: bold;
	padding-top: 50px;
}
.login-content .content-method{
	padding-top: 10px;
	font-size: 16px;
	color: #808080;
}
.login-content .content-choosen{
	display: flex;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 30px;
}
.login-content .content-choosen .content-weixin{
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	background-color: #09BB07;
	margin-right: 10px;
}
.login-content .content-choosen .content-weixin .iconfont{
	font-size: 30px;
	color: #fff;
}
.login-content .content-choosen .content-qq{
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	background-color: #0066CF;
	margin-left: 10px;
}
.login-content .content-choosen .content-qq .iconfont{
	font-size: 30px;
	color: #fff;
}
.login-content  .content-you{
	display: flex;
	align-items: center;
	margin-top: 50px;
}
.login-content  .content-you .content-radio{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid #808080;
	margin-left: 20px;
}
.login-content  .content-you .content-txt{
	margin-left: 10px;
	font-size: 15px;
	color: #808080;
}

.login-foot{
	width: 100%;
	height: 120px;
	bottom: 0;
	position: fixed;
	display: flex;
	justify-content: center;
}
.login-foot .login-shili{
	width: 100px;
	height: 100px;
	line-height: 39px;
	text-align: center;
	padding-top: 10px;
	margin-right: 50px;
}
.login-foot .login-shili .iconfont{
	font-size: 35px;
}
.login-foot .login-shezi{
	width: 100px;
	height: 100px;
	line-height: 39px;
	text-align: center;
	padding-top: 10px;
	/* margin-left: 20px; */
}
.login-foot .login-shezi .iconfont{
	font-size: 35px;
}
</style>
